<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.1</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script type="text/javascript" src="js/cookie.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">用户管理</a>
        <a>
          <cite>用户列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
            <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">
            <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <table class="layui-table" lay-data="{url:'http://127.0.0.1:8888/user/getalluser',page: {
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,limits:[5,10,15]
                ,first: true
                ,last: true
                ,count:12
            },toolbar: '#toolbarDemo',id:'test'}" lay-filter="test">
        <thead>
        <tr>
            <th lay-data="{field:'username', width:120, edit: 'text'}">用户名</th>
            <th lay-data="{field:'gender', width:120, edit:  'text'}">性别</th>
            <th lay-data="{field:'password', width:120, edit: 'text'}">密码</th>
            <th lay-data="{field:'address', edit: 'text'}">地址</th>
            <th lay-data="{field:'email', edit: 'text'}">邮箱</th>
            <th lay-data="{field:'phone', edit: 'text'}">手机</th>
        </tr>
        </thead>
    </table>

</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示-->


</script>


<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });
</script>
<script>


    layui.use('table', function(){
        var table = layui.table;
        // var laypage = layui.laypage;
        // //执行一个laypage实例
        // laypage.render({
        //     elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        //     ,count: 50 //数据总数，从服务端得到
        // });


        table.render({
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
                ,limits:[5,10,15]
                ,first: true //不显示首页
                ,last: true //不显示尾页
            }
        })



        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段

            var formData=new FormData();
            formData.append("id",obj.data.Id);
            formData.append(obj.field.toString(),obj.value.toString());
            var xhr = new XMLHttpRequest();
            xhr.open('POST', location.origin+'/user/updateuser');
            xhr.onload = function(){
                if(JSON.parse(xhr.responseText).code==200){
                    console.log(xhr.responseText);
                    layer.msg('[ID: '+ data.Id +'] ' + field + ' 字段更改为：'+ value);
                }else
                {
                    console.log(xhr.responseText);
                    layer.msg(xhr.responseText);
                }
            };
            xhr.send(formData);

        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });
    });
</script>
<script>

</script>
</body>

</html>